<template>
  <div class="container">
    <div class="mainContainer" style="padding-bottom:160rpx">
      <div class="empty" v-if="list.length==0">暂无任何报价</div>
      <div class="card" v-for="(item,index) in list" :key="index">
        <div class="leftArea">
          <van-checkbox :value="item.checked" @change="checkChange($event,index)"></van-checkbox>
          <div style="margin-left: 8px">
            <div class="name">
              <span>{{item.name}}</span>
              <sapn class="urgent" v-if="item.urgent">加急</sapn>
            </div>
            <div class="remark">备注:{{item.remark||""}}</div>
          </div>
        </div>
        <div class="rightArea">
          <van-stepper min="1" v-model="item.quantity" @change="onChange($event,index)" />
          <div class="delArea" @click.stop="del(item.category)">
            <span>删除</span>
          </div>
        </div>
      </div>
    </div>
    <div class="buttonArea">
      <div class="total">
        <span>合计：</span>
        <span class="priceInter">{{total}}</span>
        <span style="margin-left: 10rpx;">种商品</span>
      </div>
      <div class="allocation" @click="confirmSave">提交配送</div>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";
import { batchAdd } from "@/http";
import store from "@/utils/factory.js";

export default {
  components: {
    card
  },

  data() {
    return {
      logs: [],
      appData: {},
      checked: false,
      total: 0,
      list: [],
      showDialog: false
    };
  },
  methods: {
    tel: function(phone) {
      mpvue.makePhoneCall({
        phoneNumber: phone
      });
    },
    toggle(index, checked, id) {
      console.log(this.list);
      this.list[index].checked = !checked;
    },
    select() {
      this.showDialog = true;
    },
    onChange(e, index) {
      this.list[index].quantity = e.mp.detail;
      console.log(this.list);
    },
    checkChange(e, index) {
      console.log(e.mp.detail);
      this.list[index].checked = e.mp.detail;
      this.$forceUpdate();
      if (e.mp.detail) {
        this.total = this.total + 1;
      } else {
        this.total = this.total - 1;
      }
    },
    back() {
      mpvue.navigateBack({
        delta: 1
      });
    },
    del(category) {
      let self = this;
      mpvue.showModal({
        title: "提示",
        content: "确定删除该报价么？",
        complete: function(res) {
          if (res.confirm) {
            self.list.splice(
              self.list.findIndex(v => v.category === category),
              1
            );
            console.log(self.list);
            store.set("batchList", self.list);
            self.total = total - 1;
          }
        }
      });
    },
    confirmSave() {
      let a = [];
      let self = this;
      if (this.list.length == 0) {
        mpvue.showToast({
          title: "暂无任何清单",
          icon: "none",
          duration: 2000
        });
        return false;
      }
      this.list.map(item => {
        if (item.checked) {
          a.push({
            category: item.category,
            quantity: item.quantity,
            remark: item.remark,
            urgent: item.urgent
          });
        }
      });
      batchAdd({
        deliveries: a
      }).then(res => {
        mpvue.showModal({
          title: "成功",
          showCancel: false,
          content: "提交配送成功",
          success: function(res) {
            if (res.confirm) {
              mpvue.navigateBack({
                delta: 1
              });
              store.remove("batchList");
              self.list = [];
              self.total = 0;
            }
          }
        });
      });
    }
  },
  onShow() {
    this.list = store.get("batchList") || [];
    this.list.map(item => {
      item.checked = true;
    });
    this.total = this.list.length;
  },
  mounted() {},
  created() {}
};
</script>

<style>
.card {
  display: flex;
  font-size: 28rpx;
  background: #fff;
  position: relative;
  align-items: center;
  margin: 20rpx;
  border-radius: 8rpx;
  padding: 36rpx 20rpx !important;
}

.delArea span {
  background: #ee0a24;
  color: #fff;
  padding: 8rpx 24rpx;
  border-radius: 8rpx;
}

.leftArea {
  display: flex;
  align-items: center;
  flex: 1;
  padding-right: 40rpx;
}

.urgent {
  font-size: 24rpx;
  background: #0099ff;
  color: #fff;
  padding: 6rpx 16rpx;
  border-radius: 4rpx;
  margin-left: 10rpx;
}

.name {
  font-size: 32rpx;
  padding-bottom: 30rpx;
}

.remark {
  font-size: 24rpx;
  color: #999999;
}

.delArea {
  margin-top: 30rpx;
  text-align: right;
}

.empty {
  text-align: center;
  margin-top: 20rpx;
  color: #999999;
  font-size: 28rpx;
}

.total {
  font-size: 24rpx;
  font-weight: 500;
  flex: 1;
}

.price {
  color: #ee0a24;
}

.priceInter {
  color: #ee0a24;
  font-size: 40rpx;
}

.card::after {
  position: absolute;
  box-sizing: border-box;
  -webkit-transform-origin: center;
  transform-origin: center;
  content: " ";
  pointer-events: none;
  top: auto;
  right: 0;
  bottom: 0;
  left: 15px;
  border-bottom: 1px solid #eee;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.left {
  flex: 1;
}
.right {
  color: #a4a4a4;
}

.back {
  background: #222222 !important;
  color: #fff !important;
}

.allocation {
  color: #fff;
  width: 220rpx;
  text-align: center;
  height: 80rpx;
  font-weight: 500;
  line-height: 80rpx;
  border: none;
  border-radius: 80rpx;
  background: linear-gradient(to right, #ff6034, #ee0a24);
}

.buttonArea {
  display: flex;
  color: #323233;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 130rpx;
  background: #fff;
  padding: 0 30rpx;
  box-shadow: 2rpx 0 20rpx #dcdfe6;
}
</style>
